<template>
  <div class="star" :class="`star-${size}`">
    <span class="star-item" v-for="(sc,index) in starClasses" :key="index" :class="sc">
    </span>
  </div>
</template>

<script>
  //类名常量
  const CLASS_ON = 'on'
  const CLASS_HALF = 'half'
  const CLASS_OFF = 'off'

  export default {
    name: "Star",
    props:{
      score:Number,
      size:Number
    },
    computed:{
      /*
      3.2分 就有 3 个全星 0个半星 2个灰星
      3.5分 就有 3 个全星 1个半星 1个灰星
       */
      // 该方法产生一个数组starArr来表示on half off类名的span数量（总长度为5）
      starClasses(){
        const {score} = this
        const starArr = []
        //向scs中添加 n
        // floor() 方法返回小于等于x的最大整数。
        const scoreInteger = Math.floor(score)
        for (let i = 0;i<scoreInteger;i++){
          starArr.push(CLASS_ON)
        }
        //向scs中添加 0/1  CLASS_HALF
        if(score*10 - scoreInteger*10 >= 5){
          starArr.push(CLASS_HALF)
        }
        // 向scs中添加 n 个CLASS_OFF
        // for (let i = 0 ;starArr.length<5;i++){
        //   starArr.push(CLASS_OFF)
        // }
        while (starArr.length<5){
          starArr.push(CLASS_OFF)
        }
        return starArr
      }
    }
  }
</script>

<style lang="scss" scoped>

 .star {
   float: left;
   font-size: 0;
   .star-item{
     display: inline-block;
     background-repeat: no-repeat;
   }
   &.star-24 {
     .star-item {
       width: 0.769rem;
       height: 0.769rem; //10px
       margin-right: 0.231rem;
       background-size: 0.769rem 0.769rem; //10px
       &:last-child {
         margin-right: 0;
       }
       &.on {
         background-image: url('./images/star24_on@2x.png');
       }
       &.half {
         background-image: url('./images/star24_half@2x.png');
       }
       &.off {
         background-image: url('./images/star24_off@2x.png');
       }
     }
   }
   &.star-36 {
     .star-item {
       width: 1.154rem;
       height: 1.154rem; //15px
       margin-right: 5px;
       background-size: 1.154rem 1.154rem;
       &:last-child{
         margin-right: 0;
       }
       &.on{
         background-image: url('./images/star36_on@2x.png');
       }
       &.half{
         background-image: url('./images/star36_half@2x.png');
       }
       &.off{
         background-image: url('./images/star36_off@2x.png');
       }
     }
   }
   &.star-48 {
     .star-item {
       width: 1.538rem;
       height: 1.538rem;  //20px
       margin-right: 1.538rem;
       background-size: 20px 20px;
       &:last-child{
         margin-right: 0;
       }
       &.on{
         background-image: url('./images/star48_on@2x.png');
       }
       &.half{
         background-image: url('./images/star48_half@2x.png');
       }
       &.off{
         background-image: url('./images/star48_off@2x.png');
       }
     }
   }
 }
</style>
